<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">:nth-of-type() Selector</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/selectors/">选择器</a> &gt; <a href="/category/selectors/child-filter-selectors/">子元素过滤</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/nth-of-type-selector/" target="_blank">:nth-of-type() Selector</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry selector" id="nth-of-type1"><h2 class="section-title"><span>nth-of-type selector</span></h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。（感谢<a href="http://weibo.com/u/1769654722" target="_blank">@caikan</a>提供的翻译）
			</p>
<ul class="signatures"><li class="signature">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.9/">1.9</a></span>jQuery( ":nth-of-type(index/even/odd/equation)" )</h4>
<p class="argument"><strong>index: </strong>
				每个相匹配子元素的索引值，从<code>1</code>开始，也可以是字符串 <code>even</code> 或 <code>odd</code>，或一个方程式( 例如  <code>:nth-of-type(even)</code>, <code>:nth-of-type(4n)</code>)。</p>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>因为jQuery的实现<code>:nth-</code>是严格来自CSS规范，<code>n</code>值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如<code>:eq()</code> 或 <code>:even</code> ，jQuery遵循JavaScript的“0索引”的计数。</p>
<p>这个不寻常的用法，可进一步讨论中找到<a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">W3C CSS specification</a>.</p>
<div style=" background-color: #F2F2F2; padding:10px;">
<h4>注：</h4>
<p><code>:nth-of-type()</code>选择器是jQuery 1.9新增的选择器，它是遵循CSS 3中结构性伪类选择符 E:nth-of-type(n)实现的。和CSS 3中结构性伪类选择符 E:nth-of-type(n)一样，它选择的是匹配所有父元素下同类型中的第n个同级兄弟元素E。</p>
<p><code>:nth-of-type()</code>选择器和 <a href="/nth-child-selector/"><code>:nth-child()</code></a>选择器很容易混淆，至少我是这么认为的。看下面一个例子：</p>
<p></p><pre>&lt;div class="test"&gt;<br/>
			&lt;p&gt;A元素&lt;/p&gt;<br/>
			&lt;div&gt;B元素&lt;/div&gt;<br/>
			&lt;p&gt;C元素&lt;/p&gt;<br/>
			&lt;p&gt;D元素&lt;/p&gt;<br/>
			&lt;/div&gt;</pre>
<p>看下面的代码</p>
<p></p><pre>
			$("p:nth-of-type(2)")//选择的是C元素<br/>
			$("p:nth-child(2)")//什么元素也没选中</pre>
<p>两者比较：</p>
<ul><li>这里<code>p:nth-of-type(2)</code>选择器选择父元素的第二个段落p元素 ，它不管段落p元素在什么位置，段落p元素可能是该父级元素的第3个或者第5个，也可以是第n个子元素，这里n肯定大于2，只要父级元素<code>&lt;div class="test"&gt;</code>有两个以上的段落p子元素，他就肯定能选择到第二个段落p元素。</li>
<li>这里<code>p:nth-child(2)</code>选择器选择不到任何元素，<code>p:nth-child(2)</code>选择器要满足的条件是：<ul><li>1、是一个段落p元素；</li>
<li>2、是父元素的第二个子元素</li></ul>
			上述的HTML结构中，<code>&lt;div class="test"&gt;</code>的第二个子元素是div元素，而不是p元素，所以不满足条件，这样就选择不到任何元素
			</li></ul></div>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="class">.nth</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value"> red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>John<span class="tag">&lt;/<span class="title">span</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">b</span>&gt;</span>Kim<span class="tag">&lt;/<span class="title">b</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>Adam<span class="tag">&lt;/<span class="title">span</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">b</span>&gt;</span>Rafael<span class="tag">&lt;/<span class="title">b</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>Oleg<span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">b</span>&gt;</span>Dave<span class="tag">&lt;/<span class="title">b</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>Ann<span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">i</span>&gt;</span><span class="tag">&lt;<span class="title">span</span>&gt;</span>Maurice<span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>Richard<span class="tag">&lt;/<span class="title">span</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>Ralph<span class="tag">&lt;/<span class="title">span</span>&gt;</span>,</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span>Jason<span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"span:nth-of-type(2)"</span> )</code></div></div><div class="container"><div class="line"><code>  .append( <span class="string">"&lt;span&gt; is 2nd sibling span&lt;/span&gt;"</span> )</code></div></div><div class="container"><div class="line"><code>  .addClass( <span class="string">"nth"</span> );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>